<template>
  <div>
    <!-- 设备添加人员 -->
    <el-dialog :visible.sync="dialogFormVisible" v-if="dialogFormVisible" :width="activeName===`second`?`1800px`:`700px`" :title="dialogTitle"
               :close-on-click-modal="false" @close="onClose">
               <!-- {{ isShowSecond?`1800px`:`700px` }} -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="1. 设备注册" name="first">
          <el-form class="el-form-box" ref="dataForm" :model="form" :rules="rules" label-position="left"
                   label-width="100px"
                   style="margin: 0 50px">
            <el-form-item label="生效时间" prop="effectivedate">
              <el-date-picker @input="$forceUpdate()" v-model="form.effectivedate" type="datetimerange"
                              range-separator="-"
                              start-placeholder="开始日期" end-placeholder="结束日期"
                              :default-time="['00:00:00', '23:59:59']"/>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入姓名" maxlength="20"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="`2. 采集图片(掌静脉)`" name="second" v-if="isShowSecond">
          <!--掌静脉-->
          <Table1 ref="tableRef" :person-id="personId" :person-name="form.name" v-if="page===`PalmVein`"/>
          <!--人脸-->
          <Table2 ref="tableRef" :person-id="personId" :person-name="form.name" v-else/>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->
        <el-button type="primary" v-if="activeName===`first`" @click="ok()">提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {parseTime} from "@/utils/ruoyi";
import {addDevice, queryPersonIdByName} from "@/api/community/person";
import Table1 from './Table1'
import Table2 from './Table2'
import {getDeviceInfoDetailsApi} from "@/api/network";

const rules = {
  name: [
    {
      trigger: ["blur", "change"],
      required: true,
      message: "姓名不能为空",
      // pattern: cnReg,
    },
  ],
  sTelephoneNumber: [
    {
      required: false,
      message: "手机号码不能为空",
      trigger: ["blur"],
    },
    {
      pattern: /^1[0-9]\d{9}$/,
      message: "请输入正确的号码",
      trigger: ["blur"],
    },
  ],
  sCertificateNumber: [
    {
      trigger: ["blur", "change"],
      required: false,
      message: "请填写身份证信息",
    },
    {
      pattern: /(^\d{18}$)|(^\d{15}$)/,
      message: "请输入正确的身份证",
      trigger: ["blur", "change"],
    },
  ],
  effectivedate: [
    {
      trigger: "blur",
      required: true,
      message: "请选择生效日期",
    },
  ],
  iAccessCardNumber: [
    {
      trigger: "blur",
      required: true,
      message: "请输入门禁卡号",
    },
  ],
};
export default {
  name: "deviceDialog",
  data: function () {
    return {
      isShowSecond: false,
      page: '',
      activeName: "first",
      dialogFormVisible: false,
      dialogTitle: "设备注册",
      personId: "",
      form: {
        effectiveStartTime: "2023-02-28 09:11:26",
        name: "",
        validEndTime: "2026-02-28 23:59:59",
        effectivedate: ["2023-02-28 09:11:26", "2026-02-28 23:59:59"],
      },
      rules,
    };
  },
  components: {
    Table1,
    Table2,
  },
  created() {
    this.init()
  },
  methods: {
    handleClick(e) {
      if (this.activeName === `first`) {
        this.dialogTitle = `设备注册`

      } else {
        this.dialogTitle = `采集图片(特征)`
      }
    },
    init() {
      getDeviceInfoDetailsApi().then(res => {
        if (res.deviceType.deviceType.value == "PalmVein") {
          console.log("PalmVein")
          this.page = res.deviceType.deviceType.value
        }
      })
    },
    open() {
      this.dialogFormVisible = true
      this.activeName = 'first'
    },
    onClose() {
      this.$refs["dataForm"].resetFields();
    },
    ok() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.singleLoading = true;
          this.form.effectiveStartTime = parseTime(this.form.effectivedate[0]);
          this.form.validEndTime = parseTime(this.form.effectivedate[1]);
          window.localStorage.setItem("time-array", JSON.stringify({
            effectiveStartTime: parseTime(this.form.effectivedate[0]),
            validEndTime: parseTime(this.form.effectivedate[1])
          }))
          // console.log(JSON.parse(window.localStorage.getItem("time-array")));
          delete this.form.effectivedate;
          delete this.form.idNumber;
          delete this.form.sLocalPicturePath;
          delete this.form.tel;
          delete this.form.type;
          addDevice(this.form)
            .then((res) => {
              this.singleLoading = false;
              this.$message.success("提交成功");
                this.isShowSecond = true
                this.activeName = 'second'
            })
            .catch((err) => {
              this.singleLoading = false;
            });
        } else {
          this.singleLoading = false;
        }
      });
    },

  },
  watch: {
    dialogFormVisible: function (val) {
      if (val === false) {
        this.form = {
          personId: "",
          name: "",
          tel: "",
          idNumber: "",
          type: "",
          sLocalPicturePath: "",
        };
        this.fileList = [];
      }
    },
  },
}
</script>

<style scoped>

</style>
